<template>
    <div>
        <div ref="charts" style="width: 1500px; height: 800px"></div>
    </div>
</template>
<script>
import beijing from "@/assets/data-beijing.json"
import * as echarts from "echarts";
export default {
  data(){
    return{
      data: [
              { name: "房山区", value: 11 },
              { name: "顺义区", value: 447 },
              { name: "朝阳区", value: 1397},
              { name: "通州区", value: 447 },
              { name: "西城区", value: 254 },
              { name: "丰台区", value: 245 },
              { name: "东城区", value: 214},
              { name: "昌平区", value: 206 },
              { name: "大兴区", value: 203 },
              { name: "海淀区", value: 153 },
              { name: "平谷区", value: 74},
              { name: "石景山区", value:70 },
              { name: "门头沟区", value:51 },
              { name: "怀柔区", value: 30},
              { name: "密云区", value: 15 },
              { name: "延庆区", value: 14 },
            ]
    }
  },
  created () {
    this.$nextTick(() => {
      this.initCharts();
    })
  },
  methods: {
    initCharts() {
      const charts = echarts.init(this.$refs["charts"]);
      const option = {
           visualMap:{
              type:'piecewise',
              pieces:[{
                min:0,
                max:100,
                color:'yellow'
              },{
                min:101,
                max:999,
                color:'pink'
              },{
                min:1000,
                max:2000,
                color:'blue'
              }]
            },
        // 背景颜色
        backgroundColor: "#404a59",
        // 提示浮窗样式
        tooltip: {
          show: true,
          trigger: "item",
          alwaysShowContent: false,
          backgroundColor: "#0C121C",
          borderColor: "rgba(0, 0, 0, 0.16);",
          hideDelay: 100,
          triggerOn: "mousemove",
          enterable: true,
          textStyle: {
            color: "#DADADA",
            fontSize: "12",
            width: 20,
            height: 30,
            overflow: "break",
          },
          showDelay: 100
        },
        // 地图配置
        series:[
          {
            type:"map",
            map: "北京",
            data:this.data,
          label: {
            // 通常状态下的样式
            normal: {
              show: true,
              textStyle: {
                color: "#fff",
              },
            },
            // 鼠标放上去的样式
            emphasis: {
              textStyle: {
                color: "#fff",
              },
            },
          },
          // 地图区域的样式设置
          itemStyle: {
            normal: {
              borderColor: "rgba(147, 235, 248, 1)",
              borderWidth: 1,
              shadowColor: "rgba(128, 217, 248, 1)",
              shadowOffsetX: -2,
              shadowOffsetY: 2,
              shadowBlur: 10,
            },
            // 鼠标放上去高亮的样式
            emphasis: {
              areaColor: "#389BB7",
              borderWidth: 0,
            },
          },
          }
        ]
      };
      

      // 地图注册，第一个参数的名字必须和option.geo.map一致
      echarts.registerMap("北京",beijing)

      charts.setOption(option);
    },
  },
};
</script>